<template>
    <v-layout type="main">
        <p class="page-title">模型测试管理</p>
        <div class="detail-box" v-if="detailData">
            <div class="pic">
                <img src="@/assets/img/test-pic.png" alt="">
            </div>
            <div class="word">
                <h3 class="title">
                    <h3 class="info-title"> {{ detailData.model.name }}</h3>
                    <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/model' })" />
                </h3>
                <p class="hint">{{ detailData.model_version.version }}</p>

                <div class="alick-handle-btns">

                    <div class="alick-handle-btns">
                        <a class="handle-btn" href="javascript:;" @click="start"
                            v-show="detailData.status == 'terminated'">启动</a>
                        <a class="handle-btn" href="javascript:;" @click="stop"
                            v-show="detailData.status != 'terminated'">停止</a>
                    </div>
                </div>
            </div>
        </div>
        <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike"
            v-show="!$route.meta.hideDetails">
            <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
                <span class="nav-alike-item">{{ e.meta.title }}</span>
            </el-radio-button>
        </el-radio-group>
        <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">

            <router-view class="content-detail" :detailData.sync="detailData" v-if="detailData" />
        </div>
    </v-layout>
</template>
<script>


import { getModelTestDetail, startModelTest, stopModelTest } from '@/api/modelTest'
export default {
    data() {
        return {
            nowRouter: this.$route.name,
            thisRouter: [],
            detailData: null,
            model_test_id: this.$route.query.model_test_id,
        };
    },
    methods: {
        skip() {
            let path = `/modelEva/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
            if (path == this.$route.path) return
            this.$router.push({
                path,
                query: {
                    id: this.$route.query.id
                }
            })
        },
        async getDetail() {
            let ret = await getModelTestDetail({ id: this.model_test_id })
            this.detailData = ret.data
            if (this.detailData.type_id == 1) {
                this.detailData.type = { "name": "自定义", "id": "1" }
                this.showDiv = true
            }
        },
        async start() {
            await startModelTest(this.model_test_id);
            this.getDetail()
        },
        async stop() {
            await stopModelTest(this.model_test_id);
            this.getDetail()
        },

    },
    mounted() {
        let temp = this.$router.options.routes.filter(
            e => e.name == 'model' && e.children
        )
        this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
        this.getDetail()
    },

    destroyed() {

    },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>